<template>
	<view class="bankCard">
		<view class="bank_box">
			<view class="bank_box_li my-mgt-15" :class="index % 2 == 0?'bank_box_li_red':'bank_box_li_gray'" v-for="(item,index) in dev" :key="item.id">
				<view class="img_box_li my-mgt-15 my-mgl-15 my-mgr-10"><image :src="item.bankLogo" class="img" mode=""></image></view>
				<view class="bank_tlt_box">
					<view class="bank_txt">
						<view class="top">{{item.bankName}}</view>
						<view class="fior">储蓄卡</view>
					</view>
					<view class="banknum">****  ****  ****  {{item.bankCardNumber.substring(item.bankCardNumber.length-4)}}</view>
				</view>
			</view>
			<view class="addcard_box my-mgt-15" @click="goaddCard">
				<view class="my-pdl-20">+ 添加新的账户</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getbanklistApi} from "@/api/myinter.js"
	export default {
		data() {
			return {
				dev:[],
			};
		},
		created() {
			this.getBankList()
		},
		methods:{
			goaddCard(){
				uni.navigateTo({
					url:"/pages/my/addCard"
				})
			},
			async getBankList(){
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await getbanklistApi({})
				if(res.statusCode ===200){
					uni.hideLoading()
					this.dev = [...this.dev,...res.data.data]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bankCard{
		width: 100%;
		height: 100vh;
		background: #FAFAFA;
		.bank_box{
			width: 100%;
			height: 1150rpx;
			.bank_box_li{
				width: 680rpx;
				height: 240rpx;
				margin: auto;
				border-radius: 5rpx;
				display: flex;
				.img_box_li{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #e4e8e9;
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}
				.bank_tlt_box{
					width: 85%;
					height: 240rpx;
					color: #FFFFFF;
					.bank_txt{
						width: 100%;
						height: 140rpx;
						.top,.fior{
							width: 100%;
							font-weight: 500;
						}
						.top{
							line-height: 80rpx;
							font-size: 32rpx;
							color: #FFFFFF;
						}
						.fior{
							font-size: 26rpx;
							color: #bfbfbf;
						}
					}
					.banknum{
						width: 100%;
						height: 80rpx;
						text-align: center;
						font-size: 54rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
			.bank_box_li_red{
				background: #C9515A;
			}
			.bank_box_li_gray{
				background:  #1A66A4;
			}
			.addcard_box{
				width: 680rpx;
				height: 150rpx;
				margin: auto;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				border-radius: 10rpx;
				font-size: 38rpx;
				font-weight: 400;
				color: #000000;
			}
		}
	}
</style>
